<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">

  <title>HTML5 Graph sample</title>
  <link rel="stylesheet" href="stylesheets/style.css">
  <script src="libs/jquery.min.js"></script>
  <script src="libs/underscore-min.js"></script>
  <script src="libs/backbone-min.js"></script>
  <script src="libs/storage.js"></script>
  <script src="libs/script.js"></script>
</head>
<body>
  <div id=wrapper>
    <div id=switchview>
      グラフ描画のカラム選択<br>
      <input type=radio name=switch value=population checked>人口
      <input type=radio name=switch value=area>面積
    </div>
    <div id=tableview>
      <table>
        <thead>
          <tr><td>都市名</td><td>人口</td><td>面積</td></tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div id=graphview>
      <canvas></canvas>
    </div>
  </div>

  <script type="text/tmpl" id="table-template">
    <table>
      <thead>
        <tr><td>都市名</td><td>人口</td><td>面積</td></tr>
      </thead>
    <% 
    prefs.each(function(pref) { 
      var attr_ = pref.attributes;
      %>
      <tr data-id="<%= attr_.id %>"><td data-attr="name"><%= attr_.name %></td>
        <td data-attr="population" contenteditable=true><%= attr_.population %></td>
        <td data-attr="area" contenteditable=true><%= attr_.area %></td></tr>
      <% }); %>
  </table>
  </script>
</body>
</html>
